<script setup>
import { ChatDotRound, MagicStick, Collection, Cpu, Connection, Tools, Promotion, ArrowDown,Message } from '@element-plus/icons-vue'
import { inject, ref } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter

// 注入 isAuthenticated 状态 和 router
const isAuthenticated = inject('isAuthenticated', ref(false)) // 从 App.vue 注入
const router = useRouter() // 获取 router 实例

// 按钮点击处理函数
const handleAction = () => {
  if (isAuthenticated.value) {
    // 如果已认证，跳转到聊天页面
    router.push({ name: 'Chat' });
  } else {
    // 如果未认证，跳转到登录页面
    router.push({ name: 'Login' });
  }
}
</script>

<template>
  <div class="landing-page product-showcase">
    <!-- Navigation (保持简洁) -->
    <nav class="landing-nav showcase-nav">
      <div class="landing-container landing-nav-content">
        <span class="landing-logo showcase-logo">AI 问答助手</span>
        <button class="landing-cta-nav showcase-cta-nav" @click="handleAction">立即开始</button>
      </div>
    </nav>

    <!-- Section 1: Hero - 占满首屏 -->
    <section class="showcase-section hero-section-fullpage" id="hero">
      <div class="landing-container hero-content-centered">
        <h1 class="showcase-headline" data-aos="fade-up" data-aos-delay="100">
          智慧涌动，对话无界
        </h1>
        <p class="showcase-subheadline" data-aos="fade-up" data-aos-delay="200">
          体验下一代 AI 问答，开启智能交互新纪元。
        </p>
        <button class="showcase-cta-main" @click="handleAction" data-aos="fade-up" data-aos-delay="300">
          探索智能
        </button>
        <a href="#feature-dialogue" class="scroll-down-indicator" aria-label="Scroll down">
          <el-icon><ArrowDown /></el-icon>
        </a>
      </div>
      <!-- 可以添加背景视频或动态效果 -->
      <div class="hero-background-overlay"></div>
    </section>

    <!-- Section 2: Feature - 流畅对话 -->
    <section class="showcase-section feature-section-fullpage bg-gradient-1" id="feature-dialogue">
      <div class="landing-container feature-content-split">
        <div class="feature-text-content" data-aos="fade-right">
          <h2 class="showcase-section-headline">自然流畅，心领神会</h2>
          <p class="showcase-section-text">
            忘掉生硬的机器指令。我们先进的 AI 能够理解上下文，进行富有逻辑和情感的多轮对话，准确捕捉您的每一个想法。
          </p>
        </div>
        <div class="feature-visual-placeholder" data-aos="fade-left">
          <!-- Placeholder for image/animation -->
          <div class="visual-box visual-dialogue">
            <el-icon><ChatDotRound /></el-icon> <!-- 添加图标 -->
          </div>
        </div>
      </div>
    </section>

    <!-- Section 3: Feature - 多模型 -->
    <section class="showcase-section feature-section-fullpage bg-gradient-2" id="feature-models">
       <div class="landing-container feature-content-split reverse">
         <div class="feature-text-content" data-aos="fade-left">
           <h2 class="showcase-section-headline">灵活应变，智选核心</h2>
           <p class="showcase-section-text">
             内置通用对话与深度推理双引擎。无论是日常闲聊、知识问答还是复杂分析，一键切换，总有最适合您的智能模式。
           </p>
         </div>
         <div class="feature-visual-placeholder" data-aos="fade-right">
           <!-- Placeholder for image/animation -->
           <div class="visual-box visual-models">
             <el-icon><MagicStick /></el-icon> <!-- 添加图标 -->
           </div>
         </div>
       </div>
    </section>

    <!-- Section 4: Feature - 历史管理 -->
    <section class="showcase-section feature-section-fullpage bg-gradient-3" id="feature-history">
       <div class="landing-container feature-content-split">
         <div class="feature-text-content" data-aos="fade-right">
           <h2 class="showcase-section-headline">点滴积累，永不丢失</h2>
           <p class="showcase-section-text">
             每一次智慧的火花都值得珍藏。自动保存所有对话，随时回顾、继续或管理，让您的知识库持续增长。
           </p>
         </div>
         <div class="feature-visual-placeholder" data-aos="fade-left">
           <!-- Placeholder for image/animation -->
           <div class="visual-box visual-history">
             <el-icon><Collection /></el-icon> <!-- 添加图标 -->
           </div>
         </div>
       </div>
    </section>

    <!-- Section 5: Tech Stack -->
    <section class="showcase-section tech-section-fullpage bg-dark" id="tech-stack">
      <div class="landing-container tech-content-centered">
        <h2 class="showcase-section-headline text-light" data-aos="fade-up">尖端技术，驱动未来</h2>
        <p class="showcase-section-text text-light-muted" data-aos="fade-up" data-aos-delay="100">
          融合业界前沿技术栈，只为提供稳定、高效、可信赖的智能服务。
        </p>
        <div class="tech-logos" data-aos="fade-up" data-aos-delay="200">
          <span>Vue 3</span> | <span>Flask</span> | <span>DeepSeek</span> | <span>SQLAlchemy</span> | <span>JWT</span> | <span>Element Plus</span>|
        </div>
      </div>
    </section>

    <!-- Section 6: Final CTA -->
    <section class="showcase-section final-cta-fullpage" id="final-cta">
      <div class="landing-container cta-content-centered">
        <h2 class="showcase-cta-headline" data-aos="fade-up">准备好，<br>与未来对话了吗？</h2>
        <button class="showcase-cta-main large" @click="handleAction" data-aos="fade-up" data-aos-delay="100">
          立即开启智能之旅
        </button>
      </div>
    </section>

    <!-- Footer (保持简洁) -->
    <footer class="landing-footer showcase-footer">
      <div class="landing-container">
        <div class="footer-links" data-aos="fade-up" data-aos-delay="100">
          <a href="mailto:2998840497@qq.com" target="_blank" title="Email">
            <el-icon><Message /></el-icon> 联系我
          </a>
          <a href="https://github.com/mormata/ai-qa-website" target="_blank" title="GitHub">
            <el-icon><Connection /></el-icon> GitHub
          </a>
          <!-- 可以添加隐私政策、服务条款等链接 -->
        </div>
        <!-- 移除版权信息 -->
        <p>&copy; {{ new Date().getFullYear() }} Designed by Huang JiaFeng</p>
      </div>
    </footer>

  </div>
</template>

